<!DOCtype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>vue_013_表单元素</title>
    <style> 
        .radioClass{
            border:1px solid red;
            width:200px;
            height: 100px;
        }
    </style>
</head>
<body>
    <form id="app">
        单行文本输入框：<input type="text" v-model="msg" /><br />
        <div class="radioClass">
            <div>html的单选框设置单选</div>
            <input type="radio" name="sex" checked/>男<input type="radio" name="sex" />女<br />
            <input type="radio" name="cl" />1班<input type="radio" name="cl" checked/>2班<br />
        </div>
        <div class="radioClass">
            <div>Vue的单选框设置单选</div>
            <input type="radio" v-model="sex" value = "1" />男<input type="radio" v-model="sex" value = "2"/>女<br />
            <input type="radio" v-model="cl" value="1"/>1班<input type="radio" v-model="cl" value="2" />2班<br />
        </div>
        选择框：
        <input type="checkbox" v-model="hobby" value="1" />打球 
        <input type="checkbox" v-model="hobby" value="2"/>看书
        <input type="checkbox" v-model="hobby" value="3"/>上网
        <br />
        下拉列表框：
        <select v-model="option">
            <option value="0">第0项单选</option>
            <option value="1">第1项单选</option>
            <option value="2">第2项单选</option>
            <option value="3">第3项单选</option>
            <option value="4">第4项单选</option>
            <option value="5">第5项单选</option>
            <option value="6">第6项单选</option>
            <option value="7">第7项单选</option>
            <option value="8">第8项单选</option>
            <option value="9">第9项单选</option>
            <option value="10">第10项单选</option>
            <option value="11">第11项单选</option>
            <option value="12">第12项单选</option>
        </select>
        列表框：
        <select v-model="option1" multiple="true" size="5">
            <option value="0">第0项多选</option>
            <option value="1">第1项多选</option>
            <option value="2">第2项多选</option>
            <option value="3">第3项多选</option>
            <option value="4">第4项多选</option>
            <option value="5">第5项多选</option>
            <option value="6">第6项多选</option>
            <option value="7">第7项多选</option>
            <option value="8">第8项多选</option>
            <option value="9">第9项多选</option>
            <option value="10">第10项多选</option>
            <option value="11">第11项多选</option>
            <option value="12">第12项多选</option>
        </select>
    </form>
    <script src="js/vue.js"></script>
    <script type="text/javascript">
        //vue遍历
        var vm = new Vue({
            el:'#app',
            data:{
                msg:"单行文本",
                sex:1,
                cl:2,
                hobby:[2,3],
                //下拉列表框单选
                option:3,
                //列表框多选要用数组
                option1:[2,4]
            }
        });

    </script>
</body>

</html></SCRIPT>